<%--
  Created by IntelliJ IDEA.
  User: lucongyue
  Date: 2017/12/5
  Time: 14:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<h1>APP管理</h1>
<div class="" id="conHeight">
    <div class="tab-content newContent">
        <p>数据总量：${pageInfo.total}条</p>
        <div class="tab-pane active" id="configuration">
            <div>
                <div class="no">
                    <div class="actBtnGroup">
                        <button type="button" class="btn btn-success lv" onclick="add()">添加</button>
                    </div>
                    <table class=" data-table table table-striped table-responsive text-center"
                           style="word-break:break-all; word-wrap:break-word;">
                        <thead>
                        <tr>
                            <th width="5%">序号</th>
                            <th width="15%">名称</th>
                            <th width="15%">appId</th>
                            <th width="45%">描述</th>
                            <th width="20%">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${pageInfo.list}" var="appInfo" varStatus="status">
                            <tr>
                                <td>${pageInfo.startRow+status.index}</td>
                                <td>${appInfo.name}</td>
                                <td>${appInfo.appId}</td>
                                <td>${appInfo.description}</td>
                                <td>
                                    <a style="cursor: pointer" href="#" onclick="refreshSecret('${appInfo.appId}')">刷新appSecret</a>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>


                </div>

            </div>
        </div>
        <!--分页开始-->
        <div class="page">
            <c:if test="${pageInfo.total > 10 }">
                <ul class="pageMenu clearfix">
                    <c:if test="${pageInfo.hasPreviousPage}">
                        <li onclick="conditionPageQuery(${pageInfo.prePage});"><a href="#"
                                                                                             aria-label="Previous">
                            &lt;上一页 </a></li>
                    </c:if>
                    <c:forEach items="${pageInfo.navigatepageNums}" var="curretPageNum" varStatus="status">
                        <c:choose>
                            <c:when test="${curretPageNum==pageInfo.pageNum}">
                                <li class="disabled"><a href="#">${curretPageNum}</a></li>
                            </c:when>
                            <c:otherwise>
                                <li onclick="conditionPageQuery(${curretPageNum});"><a href="#"
                                >${curretPageNum}</a>
                                </li>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                    <c:if test="${pageInfo.hasNextPage}">
                        <li onclick="conditionPageQuery(${pageInfo.nextPage});"><a href="#"
                                                                                              label="Next">
                            下一页&gt; </a></li>
                    </c:if>
                    <li class="last" style="font-size: 14px;">
                        共<span class="totalPage">${pageInfo.pages}</span>页，跳转至 <input type="number"
                                                                                      onkeyup='this.value=this.value.replace(/\D/gi,"")'
                                                                                      class="keuInput"
                                                                                      value="${pageInfo.pageNum}"
                                                                                      id="pageTogo"/>
                        <input type="button" class="btnSure" value="确定" onclick="pageSizeGo();" class="turnTo"/>
                    </li>
                </ul>
            </c:if>
        </div>
    </div>

</div>

<div class="modal fade" id="successInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 600px">
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                    aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">APP信息</h4>
            <h6 class="modal-title">请保存appId与appSecret</h6>
            <div class="modal-body">
                <div class="form-inline row">
                    <label class="col-sm-2" style="width:80px;">appId：</label>
                    <label class="col-sm-3" style="width:140px;" id="success-appId"></label>
                    <label class="col-sm-2" style="width:80px;">appSecret：</label>
                    <label class="col-sm-3" style="width:140px;" id="success-appSecret"></label>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 750px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增app</h4>
            </div>
            <form id="new_data_form">
                <div class="modal-body">
                    <div class="form-inline row">
                        <label class="col-sm-2" style="width:140px;">名称：</label>
                        <input type="text" class="col-sm-4 form-control" id="new-name">
                        <label class="col-sm-2" style="width:75px;">描述：</label>
                        <textarea class="col-sm-4 form-control" type="text" id="new-description">
                        </textarea>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn btn-success newBtn lan" onclick="saveNewData()">保存</button>
                <button type="button" class="btn btn-success newBtn lv" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    function add() {
        clear();
        $("#addModal").modal("show");
    }

    function clear() {
        $("#new-name").val("");
        $("#new-description").val("");
    }

    function refreshSecret(appId) {
        if (!confirm("是否确认刷新appSecret")) {
            return;
        }
        var appInfo = {};
        appInfo.appId = appId;

        $.post("manage/generate-secret", appInfo, function (data) {
            if (data.success) {
                $("#success-appId").html(data.data.appId);
                $("#success-appSecret").html(data.data.appSecret);
                $("#successInfo").modal("show");
            } else {
                alert(data.msg);
            }
        })
    }

    function saveNewData() {
        var appInfo = {};
        appInfo.name = $.trim($("#new-name").val());
        if (null == appInfo.name || "" == appInfo.name) {
            alert("请输入名称");
            return;
        }
        appInfo.description = $.trim($("#new-description").val());

        $.post("manage/app-add", appInfo, function (data) {
            if (data.success) {
                $("#addModal").modal("hide");
                $("#success-appId").html(data.data.appId);
                $("#success-appSecret").html(data.data.appSecret);
                $("#successInfo").modal("show");
            } else {
                alert(data.msg);
            }
        })
    }

    /**
     * 避免bug使用modal消失时的事件刷新数据
     */
    $('#successInfo').on('hidden.bs.modal', function () {
        conditionPageQuery(1);
    });

    function conditionPageQuery(currentPageNum) {
        var data = {
            "page": currentPageNum,
        };
        $("#rightMainContent").load("index/app", data);
    }

    function pageSizeGo() {
        var page = parseInt($("#pageTogo").val());
        var no = 1;
        var currentpage = parseInt("${pageInfo.pageNum }");
        var totalPage = parseInt("${pageInfo.pages }");

        if (currentpage == page) {

        }
        else if (0 < page && page < totalPage + 1) {
            conditionPageQuery(page);
        }
        else {
            alert("输入页数超出范围");
        }
    }
</script>